<template>
    <div class="filter">
        <div class="filter-item">
            <el-button type="primary" @click="relevanceRoleVisible = true"
                >关联权责</el-button
            >
        </div>
    </div>
    <el-table :data="dataList" style="width: 100%" border>
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="roleName" label="权责名称" />
        <el-table-column prop="relateCount" label="关联用户数" />
        <el-table-column prop="roleComments" label="权责描述" />
        <el-table-column fixed="right" label="操作" min-width="50">
            <template #default="scope">
                <el-button
                    link
                    type="danger"
                    size="small"
                    @click="handleDeleteRelevance(scope.row)"
                    >取消关联</el-button
                >
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="searchForm.pageNo"
        v-model:page-size="searchForm.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="paginationStyle"
    />
    <el-dialog v-model="relevanceRoleVisible" title="关联权责" width="400">
        <label for="">权责：</label>
        <el-select
            v-model="roleItem"
            placeholder="请选择"
            clearable
            filterable
            style="width: 160px"
        >
            <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
            />
        </el-select>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="relevanceRoleVisible = false"
                    >取消</el-button
                >
                <el-button type="primary" @click="relevanceRoleConfrim()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import userHttp from "@/https/user.js";
import { ElMessage, ElMessageBox } from "element-plus";

const dataList = ref([]);
const roleList = ref([]);
const relevanceRoleVisible = ref(false);
const roleItem = ref("");
const props = defineProps({
    ruleFormProps: {
        type: Object,
        default: {},
    },
    type: {
        type: String,
        default: "",
    },
});
const ruleForm = reactive({
    depCode: "",
    depName: "",
    parentCode: "",
    parentName: "",
    sorts: 0,
    comment: "",
});
const searchForm = {
    pageNo: 1,
    pageSize: 10,
};
let total = ref(0);
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
};
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
};
ruleForm.value = props.ruleFormProps.value;
watch(
    () => props.ruleFormProps,
    (val) => {
        ruleForm.id = val.id;
        ruleForm.depCode = val.depCode;
        ruleForm.depName = val.depName;
        ruleForm.parentCode = val.parentCode;
        ruleForm.parentName = val.parentName;
        ruleForm.sorts = val.sorts;
        ruleForm.comment = val.comment;
        console.log(ruleForm, "valvalval");
        search();
        queryRoleList();
    },
    { deep: true }
);
const search = async () => {
    let params = {
        depId: ruleForm.id,
        id: ruleForm.id,
        ...searchForm,
    };
    const res = await userHttp.depQueryDepRoles(params);
    if (res.data.code === 200) {
        dataList.value = res.data.data.records;
        total.value = res.data.data.total;
    }
};
const queryRoleList = async () => {
    let params = {
        depId: ruleForm.id,
        id: ruleForm.id,
        pageNo: 1,
        pageSize: 1000,
    };
    const res = await userHttp.queryNoRateRoleList(params);
    if (res.data.code === 200) {
        roleList.value = res.data.data.records;
    }
};
const handleDeleteRelevance = async (row) => {
    ElMessageBox.confirm(`确认取消关联【${row.roleName}】吗？`, `删除`, {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        let params = {
            depId: ruleForm.id,
            id: ruleForm.id,
            roleId: row.id,
            isDelete: 1,
        };
        userHttp.depUpdateDepToRole(params).then((res) => {
            if (res.data.code === 200) {
                relevanceRoleVisible.value = false;
                queryRoleList();
                search();
            }
        });
    });
};
const relevanceRoleConfrim = async () => {
    if (roleItem.value != "") {
        let params = {
            depId: ruleForm.id,
            id: ruleForm.id,
            roleId: roleItem.value,
        };
        const res = await userHttp.depUpdateDepToRole(params);
        if (res.data.code === 200) {
            relevanceRoleVisible.value = false;
            search();
        }
    } else {
        ElMessage({
            type: "warning",
            message: "请选择权责！",
        });
    }
};
onMounted(() => {
    // queryRoleList();
});
</script>
<style lang="less" scoped>
.filter {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    .filter-item {
        margin: 0 15px 15px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        label {
            font-size: 14px;
            color: #333;
            display: inline-block;
            white-space: nowrap;
        }
    }
}
</style>